<ul class="space-y-2">
  @for (todo of service.todos(); track todo().id) {
    <li class="flex items-center gap-2 p-2 border rounded-lg hover:bg-gray-50">
      <input
        type="checkbox"
        [checked]="todo().isDone"
        (change)="service.toggleTodo(todo().id)"
        class="w-5 h-5"
      />

      @if (editingId() === todo().id) {
        <input
          type="text"
          [(ngModel)]="editingText"
          (blur)="updateTodo()"
          (keydown.enter)="updateTodo()"
          class="flex-1 px-2 py-1 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
          autoFocus
        />
      } @else {
        <span
          class="flex-1"
          (dblclick)="startEditing(todo())"
          [class]="todo().isDone ? 'line-through text-gray-500' : ''"
        >
          {{ todo().text }}
        </span>
      }
    </li>
  }
</ul>
